<template>
  <div class="all">
    <van-nav-bar title="预约" @click-left="onClickLeft" @click-right="onClickRight" />
    <div class="body">
      <van-tabs v-model="active" class="van-tabs">
        <div class="pseudo"></div>
        <van-tab title="约服务" class="make">
          <div class="selects">
            <van-button size="small" :disabled="item.p == Tab" plain v-for="item in oi" @click=" getlist(item.p)">{{
              item.name }}</van-button>

          </div>

          <div class="main">
            <div class="mains" v-for="item in list" :key="item.serveId">
              <img :src=item.subscribeImg alt="">
              <div @click="go(item)">

                <p>{{ item.serveName }}</p>
                <p>{{ time + 1 + ':00' }}|{{ time + 2 + ':00' }}|...21:00</p>
                <span>￥{{ item.servePrice }}</span>
                <button>预约</button>
              </div>

            </div>
          </div>


        </van-tab>
        <van-tab title="发型师">
          <div v-for="(item,i) in hairdresserList" :key="item.serveId">
            <div class="hairstyle">
              <img :src="item.staffImg"  style="width: 100px;">
              <div style="width: 140px;">
                <h2>{{ item.staffName }}</h2>
                <p>{{ item.staffIntroduce }}</p>

              </div>
              <div>
                <h1>评级：<span style="color: red;">{{ item.grade }}</span></h1>
                <p>预约次数：{{ item.serverCount}}</p>
              </div>

            </div>

          </div>
        </van-tab>

      </van-tabs>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
import Vue from 'vue';
import { Button, NavBar, Toast, Tab, Tabs, Calendar, Cell, Icon } from 'vant';
import { useRouter } from 'vue-router'
import Bottom from "@/components/bottom.vue"
import axios from "axios"
import { debounce, throttle } from 'lodash'

Vue.use(NavBar);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(Icon)
Vue.use(Button);
//获取当前时间
let now = new Date()

export default {

  data() {
    return {
      time: now.getHours(),
      date: '',
      show: false,
      active: 0,
      dateList: 6,
      Tab: "all",
      hairdresserList:[],
      oi: [
        {
          name: '全部',
          p: "all"

        },
        {
          name: '护理',
          p: "nurse"

        },

        {
          name: '洗剪吹',
          p: "HKT"

        },
        {
          name: '烫染',
          p: "ironing"

        },
        // {
        //   name: '其他',
        //   p: "nurse"

        // },
      ],




      list: [
        {
          imgurl: 'https://img2.baidu.com/it/u=441411618,4221766124&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          title: '蜡笔小新',
          price: '100',
          id: 1,
        },

      ]
    }
  },
  components: {
    Bottom
  },
  methods: {
    async hairdresser() {
      let res = await axios({
        url: 'http://192.168.20.106:8000/api/subscribe/onlineReservation',

        method: 'get',
        params: {
          serveId: 1
        }
      })
      console.log(res, '理发师');
      this.hairdresserList = res.data.data.staffs;
    },

    getlist: throttle(function (item) {


      axios({
        url: 'http://192.168.20.106:8000/api/subscribe/serve/tab',
        params: {
          tab: this.Tab = item,
        }
      }).then(
        res => this.list = res.data.data
      )
    }, 500),
    go(item) {
      // console.log(item.price, 'item');
      this.$router.push({ path: '/Appointment', query: { item: item } })
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
      console.log(date);
    },

  },
  mounted() {
    this.getlist()
    this.hairdresser()

  }

};
</script>

<style  lang="scss">
.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.hairstyle {
  display: flex;
  background: #efeaea;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  margin-top: 16px;

  div {
    margin-left: 15px;
  }

  img {
    width: 130px;
    border-radius: 10px;
  }

  button {
    background: red;
    border: none;
    color: #fff;
    width: 70px;
    height: 30px;
    position: absolute;
    border-radius: 6px;
    left: 75%;
    top: 35%;
  }
}

.mains {
  display: flex;
  height: 100px;
  background: #fff;
  margin: 15px;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #c4c3c3;
  position: relative;

  img {
    margin: 3px;
    border-radius: 5px;
    width: 120px;
  }

  button {
    background: red;
    width: 50px;
    height: 25px;
    border: none;
    border-radius: 15px;
    color: #edecec;
    position: absolute;
    left: 80%;

  }

  span {
    color: red;
    margin-top: 60px;
  }
}

.week {
  display: flex;
  list-style: none;
  align-items: center;
  align-items: center;
  ;
  margin: 2px;
  // width: 316px;
  width: 88%;

  li {
    margin: 10px;
    width: 50px;
    height: 30px;
    background: repeating-linear-gradient(to left, #ff0, #0f0);
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
  }
}

.body .make {
  position: relative;
  display: flex;
  flex-direction: column;
}

.main {
  background-color: #edecec;
  width: 100%;

}

.selects {
  display: flex;

  align-items: center;

  button {
    margin: 10px;
    border-radius: 5px;
    background: #ddd;
    height: 25px;
  }
}

.all {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

}

.icon {
  position: absolute;
  right: 9px;
  top: 11px;
  width: 30px;
  height: 30px;
  border-left: 1px solid #efefef;
  text-align: center;

}



.pseudo {
  width: 100%;
  height: 1px;
  border: 1px solid #ddd;
  border-bottom: none;
}

/* .van-tabs {
  border-bottom: 1px solid #221f1f;
} */
</style>

